<template>
  <!-- vue的组件结构可以没有根标签 -->
  <h1>{{ name }}</h1>
  <h2>{{ job.type }}</h2>
  <h2>{{ job.salary }}</h2>
  <h2>{{ arr[0] }}</h2>
  <h3 @click="sayHello">尝试</h3>
  <button @click="getFnc">获取setup里的数据</button>
  <Demo msg="msg" @clickFnc="clickFnc">
    <span>哈哈哈</span>
    <template v-slot:aaa>
      <div>
          有名字的插槽
      </div>
    </template>
  </Demo>
</template>

<script>
import Demo from "./components/demo.vue";
// import {h} from 'vue'
import {ref,reactive,toRaw} from 'vue'
export default {
  components:{
    Demo
  },
  name: "App",
  setup() { 
    let name = ref('妹妹') //简单数据类型定义
    let job = ref({
      type:'造价',
      salary:'20k'
    })
    let job2 = reactive({ //复杂数据类型定义，可深沉监听
      type:'造价', 
      salary:'20k',
      a:{
        b:{}
      }
    })
    let arr = reactive(['1','2','3'])//复杂数据类型定义
    //方法
    function sayHello() {
      name.value = '姐姐'//ref:在模板里可以自动读value,在js中要用value里点出来
      job.value.type ='前端'//ref定义的对象底层其实求助了 ractive函数
      job2.name ='妹妹' //reactive函数不用 属性名.value改变数据,直接改变
      arr[0] = '改变' //因为proxy代理，这种写法可以监听到变化.
    }
    let data = reactive({ //一般组件这样定义就行了额
      name:'aa',
      age:'11',
      datas:[],
      person:{
}
    })
    function clickFnc(){
      const p = toRaw(job2)
      console.log('触发事件',p)
    }
    return {
      name,
      sayHello,
      job,
      arr,
      data,
      clickFnc
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
